<template>
    <div class="content">
        <el-form class="form">
            <el-form-item label="产品信息">
                <RiskEntryInput
                    :url="'/ledger/fundInfo/list/byUser/like?fundCodeOrName='"
                    @set-entry-data="getEntryslist"
                    :itemKey="'fundProductCode'"
                    :returnDatas="searchParams.codeAndName"
                    class="item"
                    style="display: inline-block"
                />
            </el-form-item>
            <el-form-item label="募集方式">
                <el-select 
                    v-model="searchParams.fundType1" 
                    size="mini" 
                    class="item" 
                    clearable 
                    filterable 
                    @change="changeFundType1"
                >
                    <el-option v-for="(value, key) in FundType1" :key="key" :value="key" :label="value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品类型">
                <el-select 
                    v-model="searchParams.fundType2" 
                    size="mini" 
                    class="item" 
                    clearable 
                    filterable 
                    multiple 
                    collapse-tags
                    @focus="focusFundeType2"
                >
                    <el-option v-for="(value, key) in FundType2" :key="key" :value="key" :label="value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="0px">
                <el-button size="mini" type="primary" @click="handleBtn('search')">查询</el-button>
                <el-button size="mini" @click="handleBtn('loadout')">导出</el-button>
            </el-form-item>
        </el-form>
        <RiskGrid
            ref="risk-grid"
            :tableConfig="tableConfig"
            :tableData="tableData"
            :column="tableColumns"
            :paging="paging"
            v-loading="tableLoading"
            style="height: calc(100% - 120px)"
            @page-change="getTableData"
            :key="tableKey + 'tableKey'"
        >
            <template #contractType="row">
                <span>{{ contractTypePojo[row.contractType] || '--' }}</span>
            </template>
            <template #indexDraftStatus="row">
                <span>{{ settingPojo[row.indexDraftStatus] || '--' }}</span>
            </template>
            <template #tradeSysStatus="row">
                <span>{{ settingPojo[row.tradeSysStatus] || '--' }}</span>
            </template>
            <template #staticStatus="row">
                <span>{{ settingPojo[row.staticStatus] || '--' }}</span>
            </template>

            <template #fundType1="row">
                <span>{{ FundType1[row.fundType1] || '--' }}</span>
            </template>
            <template #fundType2="row">
                <span>{{ FUNDTYPE2[row.fundType2] || '--' }}</span>
            </template>
            <template #uploadDate="row">
                <span>{{ dateFormat(row.uploadDate) || '--' }}</span>
            </template>
            <template #takeEffectDate="row">
                <span>{{ dateFormat(row.takeEffectDate) || '--' }}</span>
            </template>
        </RiskGrid>
    </div>
</template>
<script lang="ts">
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import RiskGrid from '@/common/components/risk-grid.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { PageVO, TableConfigVO } from '@/common/vo';
import { downLoadFile } from '@/utils/request';
import { dateFormat } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';
import * as api from './api/contract-ledger-manage';
import DictionConstUtil from './dict';

@Component({ name: 'ContractLedgerManage', components: { RiskGrid, RiskIconButton, RiskEntryInput } })
export default class ContractLedgerManage extends Vue {
    dateFormat = dateFormat;
    FundType1 = DictionConstUtil.FundType1;
    FundType2 = {};
    FUNDTYPE2 = DictionConstUtil.FUNDTYPE2;
    tableKey: number = -1;
    tableLoading: boolean = true;
    tableConfig: TableConfigVO = {
        rowKey: 'serialNo', // 主键key TODO
        allRowKeys: [], // 所有页数据的key集合
    };
    tableData: any[] = [
        {
            contractType: '1',
        },
    ];
    tableColumns: any = [
        {
            type: 'checkbox',
            selectedAll: false,
            fixed: 'left',
            align: 'center',
            width: 60,
        },
        {
            field: 'contract',
            title: '合同信息',
            children: [
                { minWidth: '100px', field: 'contractType', title: '合同类型', slots: { default: 'operation' }, align: 'center' },
                { minWidth: '160px', field: 'contractName', title: '合同协议', slots: { default: 'default' }, align: 'center' }, // TODO
                { minWidth: '100px', field: 'uploadDate', title: '上传时间', slots: { default: 'operation' }, align: 'center' }, //
                { minWidth: '100px', field: 'takeEffectDate', title: '生效时间', slots: { default: 'operation' }, align: 'center' },
            ],
        },
        {
            field: 'fund',
            title: '产品信息',
            children: [
                { minWidth: '80px', field: 'fdProductCode', title: '产品代码', slots: { default: 'default' } },
                { minWidth: '160px', field: 'fundNameSt', title: '产品简称', slots: { default: 'default' } },
                { minWidth: '100px', field: 'fundType1', title: '募集方式', slots: { default: 'operation' }, align: 'center' },
                { minWidth: '100px', field: 'fundType2', title: '产品类型', slots: { default: 'operation' }, align: 'center' },
            ],
        },

        {
            field: 'task',
            title: '任务处理',
            children: [
                {
                    minWidth: '100px',
                    field: 'indexDraftStatus',
                    title: '合规条款库', //
                    type: 'merge',
                    slots: { default: 'operation' },
                    align: 'center',
                },
                { minWidth: '100px', field: 'tradeSysStatus', title: '交易系统', type: 'merge', slots: { default: 'operation' }, align: 'center' },
                { minWidth: '100px', field: 'staticStatus', title: '事后系统', type: 'merge', slots: { default: 'operation' }, align: 'center' },
            ],
        },
    ];

    paging: PageVO = {
        currentPage: 1,
        pageSize: 25,
        total: 0,
    };

    contractTypePojo = DictionConstUtil.contractTypeOptions;

    settingPojo = DictionConstUtil.settingPojo;

    // 分发配置参数
    searchParams: any = {
        codeAndName: '',
        fundType1: [],
        fundType2: [],
    };

    currentContractSerialNo: string = '';
    historyInfoDialog: boolean = false; // 修改记录
    editInfo: any = {};
    editInfoTemp: any = {}; // 编辑行备份信息

    async mounted() {
        this.getTableData();

        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    /**
     * 表格数据
     */
    getTableData(reset?: boolean) {
        this.tableLoading = true;
        return new Promise((resolve, reject) => {
            api.contractInfoList({ ...this.searchParams, paging: this.paging })
                .then((res: any) => {
                    console.log('res:', res);
                    this.tableData = res?.list || [];
                    this.paging.total = res?.total || 0;
                    reset && this.resetCheckRowKeys();
                    resolve(res);
                })
                .catch((err: any) => {
                    // this.tableData = [
                    //     {
                    //         serialNo: 123,
                    //         fdProductCode: '123456',
                    //         indexDraftStatus: '2',
                    //         tradeSysStatus: '1',
                    //         staticStatus: '2',
                    //     },
                    // ];
                    // this.paging.total = 1;
                    reject(err);
                })
                .finally(() => {
                    this.tableLoading = false;
                });
        });
    }

    // 产品代码
    getEntryslist(val: any) {
        this.searchParams.codeAndName = val;
    }

    /**
     * 按钮点击
     */
    async handleBtn(type: string) {
        if (type == 'search') {
            this.paging.currentPage = 1;
            this.getTableData(true);
        }
        if (type == 'loadout') {
            const checkedKeys = (this.$refs['risk-grid'] as any).checkRowKeys;
            downLoadFile({
                url: '/ledger/contract/export',
                method: 'post',
                data: checkedKeys.length ? { serialNoList: checkedKeys } : this.searchParams,
            });
            this.resetCheckRowKeys();
        }
    }

    /**
     * 重置勾选
     */
    resetCheckRowKeys() {
        this.$nextTick(() => {
            (this.$refs['risk-grid'] as any).resetCheckRowKeys();
        });
    }
    // 募集方式变动
    changeFundType1(value) {
        this.searchParams.fundType2 = [];
        if (value == '') {
            this.FundType2 = {};
        } else if (value == 'D') {
            this.FundType2 = DictionConstUtil.FundType3;
        } else if (['A', 'B'].includes(value)) {
            this.FundType2 = DictionConstUtil.FundType2;
        }
    }
    // 产品类型变动
    focusFundeType2() {
        if (this.searchParams.fundType1 == '') {
            this.yh_message_warn('先选择募集方式!')
            return
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../style/cmschina.scss';

.content {
    min-width: 1200px;
    padding: 10px;
    height: 100%;
    .form {
        display: grid;
        grid-template-columns: repeat(3, 320px) 1fr;
        border: 1px solid #ccc;
        padding: 8px;
        margin-bottom: 10px;
        .el-form-item {
            margin-bottom: 0px;
        }
        .item {
            width: 70%;
            /deep/ .el-select {
                width: 100%;
            }
        }
    }
    .form-update {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row;
        gap: 0px 20px;
        .el-form-item {
            margin-bottom: 6px;
            &:first-child {
                grid-column-start: 1;
                grid-column-end: 3;
                margin-bottom: 30px;
            }
        }
        .item {
            width: 100%;
        }
    }

    .dialog-footer {
        text-align: right;
        margin-right: 10px;
    }
}
/deep/ .el-form .el-form-item__label {
    color: #333;
    padding: 0px;
}

/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 74%;
    max-width: fit-content;
    padding: 0px;
    margin: 2px 0 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/deep/ .el-select {
    .el-select__tags {
        flex-wrap: nowrap;
    }
    .el-tag__close.el-icon-close {
        right: 1px;
    }
}
</style>
